<template>
  <div class="app-container">
    <el-dialog title="信息反馈回复" :visible.sync="dialogFormVisible" width="30%" :model="dialogData">
      <el-descriptions :column="1" size="medium ">
        <el-descriptions-item label="用户名">{{dialogData.user.username}}</el-descriptions-item>
        <el-descriptions-item label="反馈类型">
          <el-tag size="small">{{dialogData.matterType}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="反馈详情">{{dialogData.feedbackText}}</el-descriptions-item>
      </el-descriptions>
      <div style="display: flex;flex-direction: row;">
        <i class="el-icon-picture" style="color: #1e8df3;"></i>
        <div style="margin-left: 5px;">反馈图片：</div>
      </div>
      <div class="demo-image__preview">
        <el-image
          style="width: 20%;height: 20%;margin: 3%;"
          v-for="(item,index) in dialogData.imgSources" :key="index"
          :src="item" :preview-src-list="dialogData.imgSources" >
        </el-image>
      </div>
      <div style="display: flex;flex-direction: row;margin-bottom: 4%;">
        <i class="el-icon-s-comment" style="color: #1e8df3;"></i>
        <div style="margin-left: 5px;">反馈回复：</div>
      </div>
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="feedbackTextarea"
        maxlength="150"
        show-word-limit
      >
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCancel(dialogData)">取 消</el-button>
        <el-button type="primary" @click="dialogSure(dialogData)">确 定</el-button>
      </div>
    </el-dialog>
    <div style="float: right;display: flex;flex-direction: row;margin-right: 3%;">
      <el-input
        v-model="search"
        size="mini"
        prefix-icon="el-icon-search"
        placeholder="输入用户名搜索"
        style="margin-right: 6%;"
      />
      <el-button size="mini" type="danger" @click="feedbackDelete">删除</el-button>
    </div>
    <el-table
      :data="tableData.filter(data => !search || data.user.username.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%; margin-top: 3%;"
      :header-cell-style="{background: '#eaf1ff',color:'#80878f'}"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="用户名" width="120" align="left">
        <template slot-scope="scope">
          <i class="el-icon-s-custom" style="color: #1e8df3;"></i>
          <span style="margin-left: 10px">{{ scope.row.user.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈类型" width="100" align="left"
        :filters="feedbackType"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="right">
            <p>反馈类型: {{ scope.row.matterType }}</p>
            <p>详细信息: {{ scope.row.feedbackText }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" :type="matterType(scope.row.matterType)">
                {{ scope.row.matterType }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="详细信息" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.feedbackText }}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈图片" align="center">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image
              style="width: 40px;height: 50px;margin: 3%;"
              v-for="(item,index) in scope.row.imgSources"
              :key="index" :src="item"
              :preview-src-list="scope.row.imgSources">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="反馈时间" align="center" sortable>
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈回复信息" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.reply }}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈状态" width="100" align="left"
        :filters="[{ text: '已回复', value: true }, { text: '未处理', value: false }]"
        :filter-method="filterHandler"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.handled"
            disabled>
          </el-switch>
        </template>
      </el-table-column>
     <el-table-column label="反馈回复时间" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">回复</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import feedback from '@/api/userFeedback/feedback'
  export default {
    name: 'feedback',
    data() {
      return {
        dialogData: {
          user: {}
        },
        feedbackTextarea: '',
        search: '',
        feedbackType: [],
        tableData: [],
        multipleSelection: [],
        dialogFormVisible: false,
        formLabelWidth: '120px'
      }
    },
    mounted() {
      this.getFeedbackData();
      setInterval(() => {
        this.getFeedbackData();
      },50000);
    },
    computed: {
      matterType() {
        return function(matterText) {
          var type = 'info'
          switch(matterText) {
            case '账号问题':
              type = 'primary'
              break;
            case '充电故障':
              type = 'danger'
              break;
            case '活动问题':
              type = 'warning'
              break;
            case '其他问题':
              type = 'success'
              break;
          }
          return type
        }
      }
    },
    methods: {
      getFeedbackData() {
        this.tableData = [];
        this.feedbackType = [];
        feedback.get().then(res1 => {
          feedback.get({
            page: 0,
            size: res1.totalElements
          }).then(res => {
            res.content.forEach(item => {
              this.feedbackType.push(item.matterType);
              if(item.reply == '') {
                item.reply = '未处理'
              }
              item.imgSources = item.imgSources.map(item => {
                var src = item.split("\\")
                var imgSrc = src[src.length - 3] + "/" + src[src.length - 2] + "/" + src[src.length - 1]
                return process.env.VUE_APP_BASE_API + '/' + imgSrc;
              })
            })
            this.feedbackType = this.feedbackType.filter((item, index, arr) => arr.indexOf(item) == index)
            this.feedbackType = this.feedbackType.map(item => {
              let obj = {};
              obj.text = item;
              obj.value = item;
              return obj;
            })
            this.tableData = res.content;
          })
        });
      },
      dialogCancel(dialogData) {
        this.feedbackTextarea = '';
        this.dialogFormVisible = false;
      },
      dialogSure(dialogData) {
        dialogData.handled = true;
        dialogData.reply = this.feedbackTextarea;
        dialogData.imgSources = null;
        feedback.put(dialogData).then(res => {
          this.$notify({
            title: '成功',
            message: '回复成功',
            type: 'success'
          });
          this.getFeedbackData();
          this.feedbackTextarea = '';
          this.dialogFormVisible = false;
        })
      },
      filterTag(value, row) {
        return row.matterType == value;
      },
      filterHandler(value, row) {
        return row.handled === value;
      },
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.dialogData = row;
      },
      handleDelete(index, row) {
        this.$confirm('你确定删除选中的数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var delData = [];
          delData.push(row.id);
          feedback.del(delData).then(res => {
            this.getFeedbackData();
            if(res.status == true) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
            }else {
              this.$notify.error({
                title: '删除失败',
                message: '未回复信息不可删除'
              });
            }
          })
        })
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val;
      },
      feedbackDelete() {
        this.$confirm('你确定删除选中的数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
          feedback.del(this.multipleSelection.map(item => item.id)).then(res => {
            this.getFeedbackData();
            this.multipleSelection = [];
            if(res.status == true) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
            }else {
              this.$notify.error({
                title: res.failed_count + '条消息删除失败',
                message: '选择中有未回复信息'
              });
            }
          })
        })
      }
    }
  }
</script>

<style>
</style>
